@charset "utf-8";
@import "common/reset";

@function n($px){
    @return $px/2;
}
$border-color:#ff9344;//边框颜色
.web{
    width: 100%;
    position: relative;
    overflow: hidden;
    header{
        overflow: hidden;
        height:n(62px);
        margin-top:n(45px);
        line-height: n(60px);
        .left{
            width: n(124px);
            height: n(60px);
            border: 1px solid $border-color;
            border-radius: 25px;
            text-align: center;
            font-size: n(20px);
            margin-left: n(24px);
            a{
                color: black;
                display: block;     
            }
        }
        .right{
            width: n(184px);
            select{
             -webkit-appearance:none;//清除原始样式
             width: n(159px);
             height: n(55px);
             border: n(2px) solid #ff9344;
             background: url(../img/下拉框_03.png) no-repeat
             right n(12px) top n(22px) #ffffff;
             background-size: n(30px) n(16px);
             border-radius: n(3px);
             text-indent: n(13px);
             margin-right: n(22px);
             font-size: n(26px);
            }
        }
        .middle{
            overflow: hidden;
            text-align: center;
            line-height: n(62px);
            vertical-align: middle;
            font-size: n(24px);
        }
        
    }
    nav{
        .middle {
            //          height:n(100px);
            overflow: hidden;
            //          background-color: yellow;
            .search {
                margin: 0 auto;
                width: n(300px);
                height: n(56px);
                border: $border-color n(2px) solid;
                border-radius: n(25px);
                margin-top: n(32px);
                line-height: n(56px);
                vertical-align: middle;
                font-size: 0;
                input {
                    height: n(56px);
                    line-height: n(56px);
                    vertical-align: middle;
                    margin-left: n(18px);
                    padding: 0 n(12px);
                    font-size: n(24px);
                    border: none;
                    background: none;
                    width: n(229px);
                    vertical-align: middle;
                    
                }
                i {
                    vertical-align: middle;
                    color: $border-color;
                    margin-left: n(-13px);

                }
            }
        }
        span{
            display: block;
            width: 18%;
            margin: 0 auto;
            font-size: n(26px);
            font-weight: 600;
            margin-top: n(31px);
            text-align: center;
        }
        ul{
            font-size: n(20px);
            width: 68.5%;
            margin: 0 auto;
            margin-top: n(10px);
            li{
                float: left;
                width: 23.7%;
                height: n(65px);
                background: #DCDCDC;
                line-height: n(65px);
                vertical-align: middle;
                text-align: center;
                color: #898989;
                margin-right: 0.79%;
                margin-top: n(3px);
            }
        }
    }
    section{
        .middlex {
            width: 100%;
            padding-left: n(37px);
            .middle_left {
                width: n(190px);

                line-height: n(107px);
                vertical-align: middle;
                //                  background: yellow;
                margin-left: n(20px);
                margin-top: n(8px);
                i {
                    font-size: n(58px);
                    color: $border-color;
                }
                span {
                    font-size: n(30px);
                }
            }
            .middle_right {

                line-height: n(107px);
                vertical-align: middle;
                //                  background: yellow;
                margin-right: n(20px);
                margin-top: n(8px);

                i {
                    color: $border-color;
                    vertical-align: middle;
                }
                span {
                    font-size: n(24px);
                }
            }
        }
        .re_img{
            width: 100%;
            height: n(352px);
            padding-left: 3.2%;
            padding-right: 2.4%;
            
            .re_img_left{
               
                width: 37.3%;
                height: n(352px);
                margin-right: 1.33%;
                img{
                    height: 100%;
                    position: absolute;
                    top: -999px;
                    left: -999px;
                    right: -999px;
                    bottom: -999px;
                    margin: auto;
                }
            }
            .re_img_right{
                overflow: hidden;
                
                height: n(352px);
                .re_img_right_top{
                    width: 100%;
                    height: n(146px);
                    img{
                     width: 100%;
                    position: absolute;
                    top: -999px;
                    left: -999px;
                    right: -999px;
                    bottom: -999px;
                    margin: auto; 
                    }
                }
                .re_img_right_bottom{
                    width: 100%;
                    height:n(198px);
                    margin-top: n(10px);
                    .re_img_right_bottom_left{
                        width: 44.8%;
                        height:n(198px);
                        margin-right:2.5%;
                        img{
                            width: 100%;
                           height: 100%;
                        }
                    }
                    .re_img_right_bottom_right{
                        overflow: hidden;
                        height:n(198px);
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        
                    }
                }
                
            }
        }
    }
    section{
        &:nth-of-type(2){
            margin-bottom: 60px;
        }
        .middlex {
            width: 100%;
            padding-left: n(37px);
            .middle_left {
                width: n(190px);

                line-height: n(107px);
                vertical-align: middle;
                //                  background: yellow;
                margin-left: n(20px);
                margin-top: n(8px);
                i {
                    font-size: n(58px);
                    color: $border-color;
                }
                span {
                    font-size: n(30px);
                }
            }
            .middle_right {

                line-height: n(107px);
                vertical-align: middle;
                //                  background: yellow;
                margin-right: n(20px);
                margin-top: n(8px);

                i {
                    color: $border-color;
                    vertical-align: middle;
                }
                span {
                    font-size: n(24px);
                }
            }
        }
        ul{
            width: 100%;
            padding-left: 3.2%;
            li{
                float: left;
                width: 30.5%;
                height: n(202px);
                margin-right: 3.3%;
                &:nth-of-type(3){
                    margin-right: 0;
                }
                img{
                    width: 100%;
                    position: absolute;
                    top: -999px;
                    left: -999px;
                    right: -999px;
                    bottom: -999px;
                    margin: auto;
                }
            }
        }
    }
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        ul {
            li {
                float: left;
                width: 25%;
                a {
                    display: block;
                    text-align: center;
                    color: black;
                    i {
                        font-size: n(68px);
                        color: $border-color;
                    }
                    h2 {
                        font-size: n(26px);
                        margin-top: n(9px);
                        margin-bottom: n(14px);

                    }
                }
            }
        }
    }
}
